<extend name="Public/base"/>

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>各领域交易量</h2>
    </div>

    <!-- 数据列表 -->
    <div class="data-table with-padding">
 
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100px;height:100px;"></div>
    </div>                                           
    <div class="with-padding">
        {$_page}
    </div>
</block>

<block name="script">
   
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="__STATIC__/echarts-all.js"></script>
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

  <script type="text/javascript">
  
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
      var option = {
    		    title: {
    		        text: '各领域交易量'
    		    },
    		    tooltip: {
    		        trigger: 'axis'
    		    },
    		    legend: {
    		        data:['设计与先进制造','材料科学与工程','电子信息工程','绿色节能','环境检测与调节','其它']
    		    },
    		    grid: {
    		        left: '3%',
    		        right: '4%',
    		        bottom: '3%',
    		        containLabel: true
    		    },
    		    toolbox: {
    		        feature: {
    		            saveAsImage: {}
    		        }
    		    },
    		    xAxis: {
    		        type: 'category',
    		        boundaryGap: false,
    		        data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
    		    },
    		    yAxis: {
    		        type: 'value'
    		    },
    		    series: [
    		        {
    		            name:'设计与先进制造',
    		            type:'line',
    		            stack: '总量',
    		            data:[120, 132, 101, 134, 90, 230, 210, 200, 250, 240, 200, 230]
    		        },
    		        {
    		            name:'材料科学与工程',
    		            type:'line',
    		            stack: '总量',
    		            data:[220, 182, 191, 234, 290, 330, 310, 200, 200, 260, 200, 200]
    		        },
    		        {
    		            name:'电子信息工程',
    		            type:'line',
    		            stack: '总量',
    		            data:[150, 232, 201, 154, 190, 330, 410, 200, 200, 220, 270, 200]
    		        },
    		        {
    		            name:'绿色节能',
    		            type:'line',
    		            stack: '总量',
    		            data:[320, 332, 301, 334, 390, 330, 320, 210, 200, 200, 200, 290]
    		        },
    		        {
    		            name:'环境检测与调节',
    		            type:'line',
    		            stack: '总量',
    		            data:[820, 932, 901, 934, 1290, 1330, 1320, 200, 200, 200, 200, 200]
    		        },
    		        {
    		            name:'其它',
    		            type:'line',
    		            stack: '总量',
    		            data:[520, 432, 301, 234, 1290, 130, 1320, 300, 200, 400, 200, 100]
    		        }
    		    ]
    		};


   


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.setTheme(echartstheme);
    </script>

    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('Hostdata/trading')}");
    </script>
</block>